<template>
	<view class="main">
		<!-- <view class="dot">
			
		</view>
		<view class="light">
			
		</view>
		<view class="light L_second">
			
		</view>
		<view class="light L_three">
			
		</view> -->
		
		<view class="container">

			<view class="shirt">
				<image class="firstImg" mode="widthFix" src="../../../static/fitting/t_shirt.png" alt="" />
				<view class="shirt-overlay">
					<image id="fittingR" :style="{backgroundImage:`url(${goodsDetail.image})`}" ref="mydom"
						class="shirt-overlay-pattern"></image>
					<!-- <view id="fittingR"   ref="mydom" class="shirt-overlay-pattern" ></view> -->
					<!-- <view id="fittingR" class="shirt-overlay-pattern" ></view> -->
					<image class="secondImg" mode="widthFix" src="../../../static/fitting/t_shirt.png" alt="" />
				</view>


			</view>
			<view class="text">
				<h2>{{goodsDetail.name}}</h2>
				<!-- <button @click="changeFitting">点击了我</button> -->
			</view>
			

		</view>
		<!-- <web-view  src="https://test.txjtapi.cn/fittingCode/111.html"></web-view> -->

		<view class="setBtn">
			<button type="button" class="button2" @click="showGoodsDetail(goodsDetail)">
				<view class="button-top2">♥&nbsp;&nbsp;下单</view>
				
				<view class="button-bottom2"></view>
				<view class="button-base2"></view>
			</button>
			<button type="button" class="button" @click="closeFitting">
				<view class="button-top">X&nbsp;&nbsp;关闭</view>
				<view class="button-bottom"></view>
				<view class="button-base"></view>
			</button>
			
		</view>
		
		<!-- <show-goodsdetail @closeEventtt="closeEventtt" v-if="isShowGoodsDetail" :isShowGoodsDetail="isShowGoodsDetail"></show-goodsdetail> -->
		
	</view>
</template>

<script>
	// import ShowGoodsdetail from "@/components/show-goodsdetail/show-goodsdetail.vue"
	export default {
		name: "fitting-room",
		props: ["goodsDetail"],
		options: {
			styleIsolation: 'shared'
		},
		// components:{
		// 	ShowGoodsdetail
		// },
		data() {
			return {

				// bgdata:'https://test.txjtapi.cn/uploads/fitting/1.png',

				isShowGoodsDetail:false
			};
		},
		created() {
			// this.changeFitting();
		},
		mounted() {
			// setTimeout(() => {
			// 	console.log(this.goodsDetail, '试衣间的数据')
			// }, 3000)
		},
		methods: {
			//向父组件传递关闭试衣组件事件
			closeFitting(){
				this.$emit('closeFitting');
			},
			//展示商品详情可下单界面
			showGoodsDetail(goodsDetail){
				console.log("触发showGoodsDetail事件");
				this.$emit('showGoodsDetail',goodsDetail);
				// this.isShowGoodsDetail = true;
				
			},
			// closeEventtt(){
			// 	this.isShowGoodsDetail = false;
			// }
		},
		computed: {
			// cssVars() {
			//      return {
			//        "--content-txt":this.goodsDetail.name
			//      }
			//    }

		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-drawer  .u-drawer-top  {
		
			background-color:transparent;
			
		}
		::v-deep .u-mask-show {
			/* opacity: 0.5 !important; */
			opacity: 0 !important;
	}
	
	* {
		/* 初始化 */
		margin: 0;
		padding: 0;
	}

	.main {
		min-height: 80vh;
		// height: 100%;
		/* 弹性布局 水平+垂直居中 */
		// display: flex;
		// justify-content: center;
		// align-items: center;
		// background-color: #404749;
		// background-color: #eeeeee;
		background: transparent;
		position: relative;

	}

	.container {
		/* 相对定位 */
		position: relative;
		height: 80vh;
	}

	/* T恤本体 */
	.shirt {
		position: relative;

		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.shirt .firstImg {

		// --widtdShirt:375rpx;
		width: 100%;

	}

	/* 覆盖层 */
	.shirt-overlay {
		/* 绝对定位 */
		position: absolute;
		width: 100%;
		height: 100%;

		//    top: 0;
		// left:0 ;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 0;
	}

	.shirt-overlay .secondImg {

		width: 100%;

		/* 设置混合模式为正片叠底 */
		mix-blend-mode: multiply;

	}

	/* 覆盖层图案 */
	.shirt-overlay-pattern {
		position: absolute;
		width: 100%;
		// height: 549.844px;
		// height: calc(1173rpx*750/800);
		height: calc(586rpx*750/400);
		// height: calc(146rpx*750/100);
		// top: 0;

		/* 设置元素上遮罩层的图像 */
		mask-box-image: url('https://test.txjtapi.cn/uploads/fitting/t_shirt_mask.png');
		-moz-mask-box-image: url('https://test.txjtapi.cn/uploads/fitting/t_shirt_mask.png');
		-ms-mask-box-image: url('https://test.txjtapi.cn/uploads/fitting/t_shirt_mask.png');
		-o-mask-box-image: url('https://test.txjtapi.cn/uploads/fitting/t_shirt_mask.png');
		-webkit-mask-box-image: url('https://test.txjtapi.cn/uploads/fitting/t_shirt_mask.png');
		/* 设置元素上遮罩层的图像 */
		// mask-box-image: url('../../static/fitting/t_shirt_mask.png');
		// -moz-mask-box-image: url('../../static/fitting/t_shirt_mask.png');
		// -ms-mask-box-image: url('../../static/fitting/t_shirt_mask.png');
		// -o-mask-box-image: url('../../static/fitting/t_shirt_mask.png');
		// -webkit-mask-box-image: url('../../static/fitting/t_shirt_mask.png');
		/* 掩码图像的大小 保持图像纵横比 */
		// mask-size: contain;
		mask-size: contain;
		-moz-mask-size: contain;
		-webkit-mask-size: contain;
		-ms-mask-size: contain;
		-o-mask-size: contain;
		// background-image: url('https://test.txjtapi.cn/uploads/fitting/1.png');
		// background-size:0.01%;
		background-size: 0.1%;
		display: block;
		vertical-align: top;

		// z-index: 9999;
	}


	/* 图案选项 */
	.options {
		position: absolute;
		bottom: 0;
		right: -100rpx;
	}

	.option {
		width: 50rpx;
		height: 50rpx;
		border-radius: 5rpx;
		border: 3rpx solid #fff;
		background-color: #e2e2e2;
		overflow: hidden;
		margin-top: 10rpx;
		cursor: pointer;
		transition: 0.3s;
	}

	.option img {
		width: 100%;
		height: 100%;
	}

	/* 选中态 */
	.option.active {
		border-color: #ff6b81;
	}

	/* 鼠标移入 */
	.option:hover {
		border-color: #ff6b81;
	}


	.text {
		width: 100%;
		height: 80rpx;

		position: absolute;
		top: 80rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: center;
		align-items: center;


		/* mix-blend-mode: multiply; */
	}

	.text h2 {
		opacity: 0.7;
		background-color: #1e1e1e;
		margin: 0 30rpx;
		padding: 5rpx 20rpx;
		font-size: 28rpx;
		color: #ffa60f;
		text-align: center;
		border-radius: 15rpx;
	}

	/* 泰新布业字体 */
	// .text{

	//     position: absolute;
	//     top: 150rpx;
	// 	left: 80rpx;
	//     display: flex;
	//     justify-content: center;
	//     align-items: center;

	//     /* mix-blend-mode: multiply; */
	// }
	// .text h2{

	//     font-size: 2em;
	//     color:#333;
	//     position: relative;
	// }
	// .text h2::after{
	//     content: "泰新布业";
	//     position: absolute;

	//     top: 0;
	//     left: 0;
	//     color: teal;
	//     clip-path:ellipse(
	//     100rpx 100rpx at 0% center
	//     );

	//     animation: animate 5s infinite;

	//     background-image: linear-gradient(
	//         60deg,#00d0ff,#4dff03,
	//         #ff0058,#ffbc00,#ff0058
	//     );
	//     -webkit-background-clip: text;
	//     color: transparent;
	//     z-index: 9999;
	// }

	// @keyframes animate{
	//     0%,100%{
	//         clip-path: ellipse(
	//             100rpx 100rpx at 0% center
	//         );
	//     }
	//     50%{
	//         clip-path: ellipse(
	//             100rpx 100rpx at 100% center
	//         );
	//     }
	// }

.setBtn{
	display: flex;
	justify-content: space-evenly;
}

	.button {
		-webkit-appearance: none;
		appearance: none;
		position: relative;
		border-width: 0;
		padding: 0 8rpx 12rpx;
		// min-width: 10em;
		
		// min-width: 200rpx;
		width: 200rpx;
		box-sizing: border-box;
		background: transparent;
		font: inherit;
		cursor: pointer;
	}

	.button-top {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 0;
		padding: 8rpx 16rpx;
		transform: translateY(0);
		text-align: center;
		color: #fff;
		text-shadow: 0 -1rpx rgba(0, 0, 0, .25);
		transition-property: transform;
		transition-duration: .2s;
		-webkit-user-select: none;
		user-select: none;
	}

	.button:active .button-top {
		transform: translateY(6rpx);
	}

	.button-top::after {
		content: '';
		position: absolute;
		z-index: -1;
		border-radius: 4rpx;
		width: 100%;
		height: 100%;
		box-sizing: content-box;
		background-image: radial-gradient(#cd3f64, #9d3656);
		text-align: center;
		color: #fff;
		box-shadow: inset 0 0 0rpx 1rpx rgba(255, 255, 255, .2), 0 1rpx 2rpx 1rpx rgba(255, 255, 255, .2);
		transition-property: border-radius, padding, width, transform;
		transition-duration: .2s;
	}

	.button:active .button-top::after {
		border-radius: 6rpx;
		padding: 0 2rpx;
	}

	.button-bottom {
		position: absolute;
		z-index: -1;
		bottom: 4rpx;
		left: 4rpx;
		border-radius: 8rpx / 16rpx 16rpx 8rpx 8rpx;
		padding-top: 6rpx;
		width: calc(100% - 8rpx);
		height: calc(100% - 10rpx);
		box-sizing: content-box;
		background-color: #803;
		background-image: radial-gradient(4rpx 8rpx at 4rpx calc(100% - 8rpx), rgba(255, 255, 255, .25), transparent), radial-gradient(4rpx 8rpx at calc(100% - 4rpx) calc(100% - 8rpx), rgba(255, 255, 255, .25), transparent), radial-gradient(16rpx at -4rpx 0, white, transparent), radial-gradient(16rpx at calc(100% + 4rpx) 0, white, transparent);
		box-shadow: 0rpx 2rpx 3rpx 0rpx rgba(0, 0, 0, 0.5), inset 0 -1rpx 3rpx 3rpx rgba(0, 0, 0, .4);
		transition-property: border-radius, padding-top;
		transition-duration: .2s;
	}

	.button:active .button-bottom {
		border-radius: 10rpx 10rpx 8rpx 8rpx / 8rpx;
		padding-top: 0;
	}

	.button-base {
		position: absolute;
		z-index: -2;
		top: 4rpx;
		left: 0;
		border-radius: 12rpx;
		width: 100%;
		height: calc(100% - 4rpx);
		background-color: rgba(0, 0, 0, .15);
		box-shadow: 0 1rpx 1rpx 0 rgba(255, 255, 255, .75), inset 0 2rpx 2rpx rgba(0, 0, 0, .25);
	}
	
	//关闭按钮
	.button2 {
	  -webkit-appearance: none;
	  appearance: none;
	  position: relative;
	  border-width: 0;
	  padding: 0 8rpx 12rpx;
	  // min-width: 10em;
	  width: 200rpx;
	  box-sizing: border-box;
	  background: transparent;
	  font: inherit;
	  cursor: pointer;
	}
	
	.button-top2 {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  position: relative;
	  z-index: 0;
	  padding: 8rpx 16rpx;
	  transform: translateY(0);
	  text-align: center;
	  color: #fff;
	  text-shadow: 0 -1rpx rgba(0, 0, 0, .25);
	  transition-property: transform;
	  transition-duration: .2s;
	  -webkit-user-select: none;
	  user-select: none;
	}
	
	.button2:active .button-top2 {
	  transform: translateY(6rpx);
	}
	
	.button-top2::after {
	  content: '';
	  position: absolute;
	  z-index: -1;
	  border-radius: 4rpx;
	  width: 100%;
	  height: 100%;
	  box-sizing: content-box;
	  background-image: radial-gradient(#3dcd9e, #369d8d);
	  text-align: center;
	  color: #fff;
	  box-shadow: inset 0 0 0rpx 1rpx rgba(255, 255, 255, .2), 0 1rpx 2rpx 1rpx rgba(255, 255, 255, .2);
	  transition-property: border-radius, padding, width, transform;
	  transition-duration: .2s;
	}
	
	.button2:active .button-top2::after {
	  border-radius: 6rpx;
	  padding: 0 2rpx;
	}
	
	.button-bottom2 {
	  position: absolute;
	  z-index: -1;
	  bottom: 4rpx;
	  left: 4rpx;
	  border-radius: 8rpx / 16rpx 16rpx 8rpx 8rpx;
	  padding-top: 6rpx;
	  width: calc(100% - 8rpx);
	  height: calc(100% - 10rpx);
	  box-sizing: content-box;
	  background-color: #38a19d;
	  background-image: radial-gradient(4rpx 8rpx at 4rpx calc(100% - 8rpx), rgba(255, 255, 255, .25), transparent), radial-gradient(4rpx 8rpx at calc(100% - 4rpx) calc(100% - 8rpx), rgba(255, 255, 255, .25), transparent), radial-gradient(16rpx at -4rpx 0, white, transparent), radial-gradient(16rpx at calc(100% + 4rpx) 0, white, transparent);
	  box-shadow: 0rpx 2rpx 3rpx 0rpx rgba(0, 0, 0, 0.5), inset 0 -1rpx 3rpx 3rpx rgba(0, 0, 0, .4);
	  transition-property: border-radius, padding-top;
	  transition-duration: .2s;
	}
	
	.button2:active .button-bottom2 {
	  border-radius: 10rpx 10rpx 8rpx 8rpx / 8rpx;
	  padding-top: 0;
	}
	
	.button-base2 {
	  position: absolute;
	  z-index: -2;
	  top: 4rpx;
	  left: 0;
	  border-radius: 12rpx;
	  width: 100%;
	  height: calc(100% - 4rpx);
	  background-color: rgba(0, 0, 0, .15);
	  box-shadow: 0 1rpx 1rpx 0 black, inset 0 2rpx 2rpx rgba(0, 0, 0, .25);
	}
	
	
	
	//灯光效果
	// .dot{
	// 	position: absolute;
	// 	  top: 0rpx;
	// 	  left: 85rpx;
	// 	  width: 30rpx;
	// 	  height: 30rpx;
	// 	  background-color: #0a0a0a;
	// 	  border-radius: 50%;
	// 	  z-index: 2;
	// }
	// .light{
	// 	position: absolute;
	// 	  top: 0rpx;
	// 	  left: 0;
	// 	  width:250rpx;
	// 	  height: 250rpx;
	// 	  // transform: rotate(-30deg);
	// 	  // clip-path: polygon(50% 0%, 25% 100%, 75% 100%);
	// 	  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	// 	  // background: transparent;
	// 	  background: rgb(255, 255, 255);
	// 	    // background: linear-gradient(180deg, rgba(88, 101, 242, 1) 0%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 0) 100%);
	// 	    background: linear-gradient(180deg, rgba(255, 223, 87, .5) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
	// 		z-index: 9999;
	// }
	// .L_second{
	// 	left: 250rpx;
	// 	background: linear-gradient(180deg,rgba(255, 232, 26, .7) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
	// }
	
	// .L_three{
	// 	left: 500rpx;
	// 	background: linear-gradient(180deg,rgba(255, 223, 52, .9) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
	// }
	
</style>